<template>
      <el-dialog
            :model-value="baTable.form.show_tan"
            title="用户信息"
            @close="baTable.form.show_tan = false"
            width="900"
            :style="{ height: '90vh',top:'-10vh !important'}"
        >
             
            <el-card style="width: 100%" v-loading="load">
                <div class="uleft">
                    <el-avatar :size="50" src="https://assets.g2g.com/user/avatar/5265603_1679045229540.png?" />
                </div>
                <div class="uright" v-if="data.user!=null">

                    <el-descriptions
                        class="margin-top"
                        title=""
                        :column="3"
                        border
                    >
                        
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">昵称</div>
                            </template>
                            {{ data.user.nickname }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">手机</div>
                            </template>
                            {{ data.user.mobile }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">余额</div>
                            </template>
                            {{ data.user.money }}元
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">积分</div>
                            </template>
                            {{ data.user.score }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">佣金</div>
                            </template>
                            0
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">消费金额</div>
                            </template>
                            {{ data.user.sum_order_money }}元
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">注册时间</div>
                            </template>
                            {{new Date(data.user.create_time * 1000).toLocaleString()}}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">状态</div>
                            </template>
                            {{ data.user.status == 'enable' ?'正常':'禁用' }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">邮箱</div>
                            </template>
                            {{ data.user.email }}
                        </el-descriptions-item>
 
                    </el-descriptions>

                </div>  

            </el-card>

            <el-card style="width: 100%;margin-top: 10px;height: 580px;">


                <el-tabs type="border-card">
                    <el-tab-pane label="Ta的订单">
                            <el-table :data="data.order" border style="width: 100%">
                                <el-table-column prop="ordernum" label="订单号"/>
                                <el-table-column prop="money" label="订单金额" width="120" align="center"/>
                                <el-table-column prop="order_status" label="状态" width="120" align="center">
                                    <template #default="scope">
                                         <el-tag type="danger" v-if="scope.row.is_pay == 0">待付款</el-tag>
 
                                        <el-tag type="info" v-if="scope.row.order_status == 0 && scope.row.is_pay == 1">待发货</el-tag>
                                        <el-tag type="primary" v-if="scope.row.order_status == 1 && scope.row.is_pay == 1">待收货</el-tag>
                                        <el-tag type="warning" v-if="scope.row.order_status == 7 && scope.row.is_pay == 1">申请退款</el-tag>
                                        <el-tag type="warning" v-if="scope.row.order_status == 8 && scope.row.is_pay == 1">已退款</el-tag>
                                        <el-tag type="success" v-if="scope.row.order_status == 9 && scope.row.is_pay == 1">交易完成</el-tag>
                                       
                                    </template>
                                </el-table-column>
                                <el-table-column prop="create_time" label="时间" align="center" width="150" >
                                    <template #default="scope">
                                         {{ new Date(scope.row.create_time * 1000).toLocaleString() }}   
                                    </template>
                                </el-table-column>
                            </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="Ta的余额">
                        <el-table :data="data.balance" border style="width: 100%">
                                <el-table-column prop="memo" label="描述"/>
                                <el-table-column prop="money" label="变动金额" width="120" align="center"/>
                                <el-table-column prop="before" label="变动前" width="120" align="center"/>
                                <el-table-column prop="after" label="变动后" width="120" align="center"/>
                                <el-table-column prop="create_time" label="时间" align="center"  width="150" >
                                    <template #default="scope">
                                         {{ new Date(scope.row.create_time * 1000).toLocaleString() }}   
                                    </template>
                                </el-table-column>
                            </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="Ta的积分">
                        <el-table :data="data.jifen" border style="width: 100%">
                                <el-table-column prop="memo" label="描述"/>
                                <el-table-column prop="score" label="变动积分" width="120" align="center"/>
                                <el-table-column prop="before" label="变动前" width="120" align="center"/>
                                <el-table-column prop="after" label="变动后" width="120" align="center"/>
                                <el-table-column prop="create_time" label="时间" align="center"  width="150" >
                                    <template #default="scope">
                                         {{ new Date(scope.row.create_time * 1000).toLocaleString() }}   
                                    </template>
                                </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="Ta的地址">
                        <el-table :data="tableData" border style="width: 100%">
                                <el-table-column prop="date" label="姓名" width="180" />
                                <el-table-column prop="name" label="电话" width="180" />
                                <el-table-column prop="address" label="地址" />
                                <el-table-column prop="address" label="是否默认" />
                            </el-table>
                    </el-tab-pane>
                </el-tabs>


                    
            </el-card>



        </el-dialog>


</template>


<script setup lang="ts">
import type { FormInstance, FormItemRule } from 'element-plus'
import { inject, reactive, ref ,onMounted,watch} from 'vue'
import { useI18n } from 'vue-i18n'
import FormItem from '/@/components/formItem/index.vue'
import { useConfig } from '/@/stores/config'
import type baTableClass from '/@/utils/baTable'
import { buildValidatorData } from '/@/utils/validate'
import createAxios from "/@/utils/axios";
const config = useConfig()
const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass

const { t } = useI18n()
const load = ref(false)
const data = ref([])
const getData = (type = '') =>{
    load.value = true
    return createAxios({
        url: '/admin/user.User/userCorrelation',
        method: 'get',
        params:{'act':type,'uid':baTable.form.order_uid_id!}
    }).then(res => {
        load.value = false
        data.value = res.data
    })
}

watch(
    () => baTable.form.show_tan!, // 监听operate 以此判断编辑或者新增或其他
    (newVal) => {
        if(newVal){
            getData('order')
        }

    },
    { deep: true }
)


</script>

<style scoped lang="scss">
.uleft{
    width: 55px;
    float: left;
}
.uright{
    width: 740px;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
}
</style>
